<template>
	<view class="create-marker-qr-wrapper">
		<view class="create-qr-user flex-c" v-if="userInfo.portrait">
			<image :src="userInfo.portrait" mode="" style="width: 76rpx; height: 76rpx; border-radius: 50%;margin-right: 16rpx;"></image>
			<text class="fz28">{{userInfo.nickName}}</text>
		</view>
		<view class="flex-c-col"> 
			<view class="qr-wrapper flex-c-col">
				<l-qrcode ref="qrcodeRef" @success="createSuccess" :value="qrdata" />
			</view>
			<view style="margin-bottom: 20rpx;" class="flex-c"> 
				<text>邀请码：{{userInfo?.userRelations?.invitationCode}}</text> 
				<text class="color-theme" style="margin-left: 30rpx;" @click="copyCode">复制</text>
			</view>
			<view class="color666 fz28 flex-c-c">
				扫一扫上面的二维码图案，加入我的团队
			</view>
		</view>
		<view class="qr-opration flex-c-c">
			<image src="/static/images/Group64@2x.png" mode=""></image>
			<image src="/static/images/Group66@2x.png" @click="saveImage" mode=""></image>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { onShow } from '@dcloudio/uni-app'

import type { IUserInfo } from '@/types'


export default defineComponent({
	setup() {
		const qrcodeRef = ref()
		const state = reactive({
			userInfo: {} as IUserInfo,
			qrdata: 'https://app.paleisi.com/#/'
		})
		
		onShow(() => {
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					let user = JSON.parse(res.data || '{}');
					user && (state.userInfo = user || {}) && (state.qrdata = `https://app.paleisi.com/#/?value=${state.userInfo.userRelations.invitationCode}`);
					
				}
			})
		})
		
		const saveImage = () => {
			console.log(qrcodeRef.value);
			if(!qrcodeRef.value) return;
			qrcodeRef.value.canvasToTempFilePath({
				success(res) {
					console.log(res);
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success() {
							uni.showToast({ title: '保存成功', icon: 'success'})
						}
					})
					
				},
				fail(err) {
					uni.showToast({ title: '保存失败', icon: 'error'})
				}
			})
		}
		
		const createSuccess = (url: string) => {
			console.log(url);
		}
		
		const copyCode = () => {
			uni.setClipboardData({
				data: state.userInfo?.userRelations?.invitationCode ,
				showToast: true, 
			})
		}
		return {
			qrcodeRef,
			createSuccess,
			saveImage,
			copyCode,
			...toRefs(state)
		}
	}
})
</script>

<style>page{ background-color: #f8f8fa;}</style>
<style lang="scss" scoped>
.create-marker-qr-wrapper{
	.create-qr-user{
		margin: 152rpx 0 0 156rpx;
	}
	.qr-wrapper{
		width: 462rpx;
		height: 436rpx;
		background-image: url(/static/images/Union@2x.png);
		background-position: center;
		background-size: 462rpx 436rpx;
		background-repeat: no-repeat;
		margin: 48rpx 0;
	}
	.qr-opration{
		margin-top: 200rpx;
		
		image{
			width: 100rpx;
			height: 100rpx;
			&:first-child {
				margin-right: 100rpx;
			}
		}
	}
}
</style>
